<template>
  <div class="quotes">
    <RandomModeBar 
      v-if="isRandomMode"
      :writer-name="writerName"
    />
    <div class="title">
      <h1>Quote</h1>
    </div>
    <div v-if="isRandomMode" class="random-mode-actions">
      <button class="explore-btn" @click="showAllQuotes">显示全部名言</button>
    </div>
    <div class="container">
      <div 
        v-for="(quote, index) in displayedQuotes" 
        :key="quote.id" 
        class="box"
      >
        <h2>{{ index + 1 }}</h2>
        <p>{{ quote.content }}</p>
        <div class="quote-actions">
          <el-button 
            type="primary" 
            size="small" 
            icon="el-icon-document-copy"
            @click="copyQuote(quote)" 
            class="copy-btn"
            title="复制名言"
            circle
          >
          </el-button>
        </div>
      </div>
      
      <div v-if="isLoggedIn && !isRandomMode" class="add-quote-card" @click="addQuote">
        <div class="add-quote-plus">+</div>
        <div class="add-quote-text">增加您喜欢的名言</div>
      </div>
    </div>
    <PaginationBar
      :current-page="currentPage"
      :total="total"
      :page-size="pageSize"
      :show-pagination="!isRandomMode && total > pageSize"
      @page-change="handlePageChange"
    />
  </div>
</template>

<script>
import RandomModeBar from '@/components/RandomModeBar.vue'
import PaginationBar from '@/components/PaginationBar.vue'

export default {
  name: 'Quotes',
  components: {
    RandomModeBar,
    PaginationBar
  },
  data() {
    return {
      quotes: [],
      currentPage: 1,
      pageSize: 11,
      writerName: '',
      writerId: null,
      total: 0
    }
  },
  computed: {
    displayedQuotes() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.quotes.slice(start, end)
    },
    isRandomMode() {
      return this.$route.query.mode === 'random'
    },
    isLoggedIn() {
      return !!localStorage.getItem('token')
    }
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page
    },
    showAllQuotes() {
      this.$router.push({
        path: '/quotes', 
      })
      this.pageSize = this.quotes.length
      this.currentPage = 1
    },
    copyQuote(quote) {
      navigator.clipboard.writeText(quote.content)
        .then(() => {
          this.$message.success('复制成功！')
        })
        .catch(() => {
          this.$message.error('复制失败，请手动复制')
        })
    },
    addQuote() {
      this.$router.replace({
        path: '/edit-quote',
        query: {
          writerId: this.writerId || '',
          from: this.$route.fullPath,
          _t: Date.now()
        }
      })
    },
    async fetchQuotes() {
      try {
        let url = '/api/quotes/all';
        if (this.writerId) {
          url = `/api/quotes/writer/${this.writerId}`;
        }

        const response = await this.$axios.get(url);
        
        this.quotes = response.data.quotes || response.data || [];
        this.total = response.data.total || this.quotes.length;
      } catch (error) {
        console.error('获取名言列表失败：', error);
        this.$message.error('获取名言列表失败');
      }
    },
    async fetchWriterName() {
      if (!this.writerId) return
      try {
        const response = await this.$axios.get(`/api/writers/${this.writerId}`)
        this.writerName = response.data.name
      } catch (error) {
        console.error('获取作家信息失败：', error)
      }
    }
  },
  created() {
    this.writerId = this.$route.params.writerId || null
    this.fetchQuotes()
    if (this.isRandomMode && this.writerId) {
      this.fetchWriterName()
    }
  },
  beforeRouteUpdate(to, from, next) {
    this.writerId = to.params.writerId || null
    this.currentPage = 1
    this.pageSize = 11
    this.fetchQuotes()
    if (this.isRandomMode && this.writerId) {
      this.fetchWriterName()
    }
    next()
  }
}
</script>

<style scoped>
@import '../assets/css/quote.css';

.quotes {
  padding-top: 0;
  min-height: 100vh;
}

.quotes .explore-mode-banner {
  margin-bottom: 0;
}

.title {
  width: 900px;
  margin: auto;
  margin-top: 20px;
}

.title h1 {
  text-align: center;
  padding-bottom: 10px;
  border-bottom: #3F6580 solid 1px;
  color: #2c3e50;
  font-size: 24px;
}

.random-mode-actions {
  text-align: center;
  margin: 20px 0;
}

.explore-btn {
  background: none;
  border: 1px solid #166d80;
  color: #166d80;
  padding: 8px 25px;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 0.9em;
}

.explore-btn:hover {
  background-color: #166d80;
  color: white;
}

.container {
  width: 900px;
  align-content: center;
  margin: auto;
  margin-top: 40px; 
  margin-bottom: 50px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.container .box {
  position: relative;
  width: 200px;
  height: 250px;
  background: white;
  padding: 50px 20px 20px;
  box-shadow: 0 15px 45px rgba(0,0,0,.1);
  transform: translateY(20px);
  transition: .5s;
  margin-bottom: 30px;
}

.container .box:hover {
  background: url(../assets/img/bg4.jpg);
  background-size: cover;
  transform: translateY(0px);
}

.container .box h2 {
  margin: 0 0 20px 0;
  color: #3F6580;
  font-size: 1.5em;
}

.container .box p {
  height: 150px;
  line-height: 150%;
  font-family: sans-serif;
  font-weight: 200;
  margin: 0 0 20px 0;
  color: #2c3e50;
}

.container .box:hover p {
  font-weight: 400;
  color: #000;
}

/* 修复按钮样式 */
.quote-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.action-btn {
  text-decoration: none;
  display: inline-block;
  padding: 5px;
  border-radius: 4px;
  transition: all 0.3s;
}

.action-btn i {
  color: white;
  font-size: 16px;
  transition: all 0.3s;
}

.container .box:hover .action-btn i {
  color: black;
  font-size: 20px;
  font-weight: 700;
}

.container .box:hover .action-btn:hover i {
  color: #3F6580;
}

.container .box .action-btn i.fa-heart {
  color: #e74c3c;
}

.add-quote-card {
  position: relative;
  width: 200px;
  height: 250px;
  background: white;
  padding: 50px 20px 20px;
  border: 2px dashed #166d80;
  box-shadow: 0 15px 45px rgba(0,0,0,.1);
  transform: translateY(20px);
  transition: .5s;
  margin-bottom: 30px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.add-quote-card:hover {
  border-style: solid;
  background-color: white;
  transform: translateY(0px);
}

.add-quote-plus {
  font-size: 50px;
  color: #166d80;
  font-weight: bold;
  margin-bottom: 10px;
}

.add-quote-text {
  color: #166d80;
  font-size: 14px;
  text-align: center;
  line-height: 1.4;
}

/* 响应式设计 */
@media (max-width: 960px) {
  .title, .container {
    width: 95%;
  }
  
  .container .box,
  .add-quote-card {
    width: calc(50% - 20px);
    margin: 0 10px 30px 10px;
  }
}

@media (max-width: 600px) {
  .container .box,
  .add-quote-card {
    width: 100%;
    margin: 0 0 30px 0;
  }
}
</style> 